import React, { useMemo } from'react';
import AiChat from '@/components/ai-chat/index.jsx';
import { isAppIcon } from '@/utils/application';

const baseChat = (props) => {
    const { application_profile, applicationAvailable } = props;

    const isDefaultTheme = useMemo(() => {
        return window.user.isDefaultTheme();
    }, []);

    const applicationDetail = useMemo(() => {
        return application_profile;
    }, [application_profile]);

    return (
        <div className="chat layout-bg">
            <div className={`chat__header ${!isDefaultTheme? 'custom-header' : ''}`}>
                <div className="chat-width flex align-center">
                    <div className="mr-12 ml-24 flex">
                        {isAppIcon(applicationDetail?.icon)? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img src={applicationDetail?.icon} alt="" />
                            </div>
                        ) : applicationDetail?.name? (
                            <div style={{ width: '32px', height: '32px', background: 'none' }}>
                                <img alt="" />
                            </div>
                        ) : null}
                    </div>
                    <h2>{applicationDetail?.name}</h2>
                </div>
            </div>
            <div className="chat__main chat-width">
                <AiChat
                    applicationDetails={applicationDetail}
                    type="ai-chat"
                    available={applicationAvailable}
                    appId={applicationDetail?.id}
                />
            </div>
            <div className="chat__footer"></div>
        </div>
    );
};

export default baseChat;